<template>
    <div class="app-container">
        <HeadSearch
            v-show="showSearch"
            :searchData="searchData"
            labelWidth="100"
            :cascaderData01="[]"
            :cascaderData02="[]"
            @handleSearchChild="handleSearchChild(arguments)"
            >
        </HeadSearch>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
                >
                导出
                </el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table
            stripe
            v-loading="loading"
            :data="tableData"
            >
            <el-table-column type="index" width="55" label="#" align="center" />
            <el-table-column label="用户名称" align="center" prop="username" show-overflow-tooltip/>
            <el-table-column label="昵称" align="center" prop="nickname" />
            <el-table-column label="性别" align="center" prop="gender">
                <template slot-scope="scope">
                {{ scope.row.gender === 0 ? '未知' : (scope.row.gender === 1 ? '男' : '女') }}
                </template>
            </el-table-column>
            <el-table-column label="生日" align="center" prop="birthday" width="180">
                <template slot-scope="scope">
                <span>{{ parseTime(scope.row.birthday, "{y}-{m}-{d}") }}</span>
                </template>
            </el-table-column>
            <el-table-column label="手机号" align="center" prop="mobile" />
            <el-table-column label="状态" align="center" prop="status">
                <template slot-scope="scope">
                {{ 
                    scope.row.status === 0 ? '可用' : 
                    scope.row.status === 1 ? '禁用' : 
                    scope.row.status === 2 ? '注销' : 
                    '新注册' 
                }}
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
                fixed="right"
                width="260px"
            >
                <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="handleDetail(scope.row)"
                >
                    详情
                </el-button>
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-picture-outline"
                    @click="viewAlbum(scope.row)"
                >
                    查看相册
                </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
        />
        <el-dialog
            title="详情"
            :visible.sync="detailDialog"
            width="700px">
            <div>
                <el-row :gutter="20" class="detail-row">
                    <el-col :span="12">
                        <div class="detail-item">
                            <span class="detail-label">单位：</span>
                            <span class="detail-value">{{ personInfo.company || '暂无数据' }}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="detail-item">
                            <span class="detail-label">年龄：</span>
                            <span class="detail-value">{{ personInfo.age || '暂无数据' }}</span>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20" class="detail-row">
                    <el-col :span="12">
                        <div class="detail-item">
                            <span class="detail-label">星座：</span>
                            <span class="detail-value">{{ personInfo.zodiac || '暂无数据' }}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="detail-item">
                            <span class="detail-label">婚姻状况：</span>
                            <span class="detail-value">{{ personInfo.maritalStatus || '暂无数据' }}</span>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20" class="detail-row">
                    <el-col :span="12">
                        <div class="detail-item">
                            <span class="detail-label">身份证号：</span>
                            <span class="detail-value">{{ personInfo.idNumber || '暂无数据' }}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="detail-item">
                            <span class="detail-label">身高：</span>
                            <span class="detail-value">{{ personInfo.height || '暂无数据' }}</span>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20" class="detail-row">
                    <el-col :span="12">
                        <div class="detail-item">
                            <span class="detail-label">体重：</span>
                            <span class="detail-value">{{ personInfo.weight || '暂无数据' }}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="detail-item">
                            <span class="detail-label">籍贯：</span>
                            <span class="detail-value">{{ personInfo.hometown || '暂无数据' }}</span>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20" class="detail-row">
                    <el-col :span="12">
                        <div class="detail-item">
                            <span class="detail-label">年收入范围：</span>
                            <span class="detail-value">{{ personInfo.annualIncomeRange || '暂无数据' }}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="detail-item">
                            <span class="detail-label">学历：</span>
                            <span class="detail-value">{{ personInfo.education || '暂无数据' }}</span>
                        </div>
                        
                    </el-col>
                </el-row>

                <el-row :gutter="20" class="detail-row">
                    <el-col :span="24">
                        <div class="detail-item">
                            <span class="detail-label">个性标签：</span>
                            <span class="detail-value">{{ personInfo.personalityTags || '暂无数据' }}</span>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20" class="detail-row">
                    <el-col :span="24">
                        <div class="detail-item">
                            <span class="detail-label">爱情宣言：</span>
                            <span class="detail-value">{{ personInfo.loveDeclaration || '暂无数据' }}</span>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="20" class="detail-row">
                    <el-col :span="24">
                        <div class="detail-item">
                            <span class="detail-label">备注：</span>
                            <span class="detail-value">{{ personInfo.remark || '无' }}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="detailDialog = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-drawer
            size="60%"
            title="相册"
            :visible.sync="drawer"
            direction="rtl">
            <div style="padding: 20px;">我来啦!</div>
        </el-drawer>
        
    </div>
</template>

<script>
// 引入相关API
import { 
    listMember, 
    getPerson,  
    listAlbum
} from "@/api/member"; 

export default {
    name: "Member",
    components: {},
    data() {
        return {
            // 搜索框配置
            searchData: [
                { type: "input", name: "用户名称:", key: "username", placeholder: "请输入用户名称" },
                { type: "input", name: "昵称:", key: "nickname", placeholder: "请输入昵称" },
            ],
            // 遮罩层
            loading: false,
            
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            tableData: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            detailDialog: false,
            personInfo: {},
            drawer: false,
        };
    },
    created() {
        this.getList();
    },
    methods: {
        // 搜索框事件 + 重置事件
        handleSearchChild(data) {
            let querySearch = JSON.parse(JSON.stringify(data[0]));
            switch (data[1]) {
                case "search": // 搜索框
                this.queryParams = querySearch;
                this.handleQuery();
                break;
                case "reset": // 重置按钮
                this.queryParams = {};
                this.queryParams.pageNum = 1;
                this.queryParams.pageSize = 10;
                this.getList();
                break;
            }
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            listMember(this.queryParams).then((response) => {
                this.tableData = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        /** 按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        handleDetail(row){
            getPerson(row.id).then(res=>{
                // this.personInfo = res.data ? res.data : {};
                this.personInfo = {
                    // 基础信息
                    company: "XX科技有限公司",        // 单位
                    age: 30,                          // 年龄
                    zodiac: "狮子座",                  // 星座
                    maritalStatus: "未婚",             // 婚姻状况
                    idNumber: "3201061993XXXXXXXX",    // 身份证号（脱敏处理）
                    height: "178cm",                  // 身高
                    weight: "72kg",                   // 体重
                    hometown: "江苏省南京市",          // 籍贯
                    annualIncomeRange: "20万-30万",    // 年收入范围
                    personalityTags: "乐观开朗, 责任心强, 热爱旅行", // 个性标签
                    loveDeclaration: "遇上方知有，长情共白头", // 爱情宣言
                    education: "硕士研究生",            // 学历
                    remark: "期待遇见志同道合的伴侣，共同经营温暖小家" // 备注
                };
                this.detailDialog = true
            })
            // this.$router.push({
            //     name: 'memberDetail',
            //     query:{
            //         memberId: row.id
            //     }
            // })
            
        },
        viewAlbum(row){
            this.drawer = true

            // listAlbum({userId: row.id}).then(res=>{
            //     this.drawer = true
            // })
        },
        // /** 删除按钮操作 */
        // handleDelete(row) {
        // const ids = row.id || this.ids;
        // this.$confirm(
        //     '是否确认删除ID为"' + ids + '"的数据项?',
        //     "警告",
        //     {
        //     confirmButtonText: "确定",
        //     cancelButtonText: "取消",
        //     type: "warning",
        //     }
        // )
        //     .then(function () {
        //     return delMember(ids);
        //     })
        //     .then(() => {
        //     this.getList();
        //     this.$message.success("删除成功");
        //     });
        // },
        /** 导出按钮操作 */
        handleExport() {
            this.download('/dts/dtsUser/export', {
                ...this.queryParams
            }, `members_${new Date().getTime()}.xlsx`)
        }
        
    },
};
</script>

<style scoped>
.detail-row {
  margin-bottom: 15px;
}

.detail-item {
  display: flex;
  align-items: center;
  padding: 5px;
}

.detail-label {
  font-weight: bold;
  min-width: 100px;
  color: #606266;
}

.detail-value {
  flex: 1;
  word-break: break-all;
}

</style>